<template>
  <div class="docs flex-column view-page-max">
    <div class="nav-head flex-row-center ">
      <Icon class="logo icon icon-large margin-right-10px" type="logo" />
      <div class=" blod">
        Simple-API
      </div>
    </div>

    <div class="docs-base ">
      <transition name="list-anim" appear>
        <div class="doc-card " @click="$emit('set-doc', {})">
          <div class="doc-card-back abs doc-card-add"></div>
          <label class="btn-import flex-row-center"> <Icon class="icon" type="download" />新增文档 </label>
        </div>
      </transition>
      <transition name="list-anim" appear>
        <div class="doc-card " @click="$emit('import-doc', {})">
          <div class="doc-card-back abs doc-card-import"></div>
          <label class="btn-import flex-row-center"> <Icon class="icon" type="download" />导入文档 </label>
        </div>
      </transition>
      <transition name="list-anim" appear>
        <div
          class="doc-card "
          :class="docCache ? '' : 'doc-card-ghost'"
          :title="docCache ? docCache.name : '没有暂存文档'"
          @click="docCache && $emit('set-doc', docCache)"
        >
          <div class="doc-card-back abs doc-card-cache"></div>
          <div v-if="docCache" class="abs doc-card-view flex-column">
            <div class="doc-card-head flex-row-center flex-row-between">
              <div class="doc-name1 text-nowrap margin-right-10px">
                {{ docCache.name }}
              </div>
            </div>

            <div class="doc-card-body aux">
              <div class="flex-row-center">版本:{{ docCache.version }}</div>
              <div class="flex-row-center">作者: {{ docCache.author || "" }}</div>
            </div>
            <div class="doc-card-footer aux-mini flex-row-center">
              <Icon class=" icon-gray icon-small margin-right-5px" type="time" />
              {{ docCache.updateTime || "--" }}
            </div>
          </div>
          暂存文档
          {{ docCache ? docCache.name : "" }}
        </div>
      </transition>
      <transition name="list-anim" appear>
        <div
          class="doc-card "
          :class="apiDocSelf ? '' : 'doc-card-ghost'"
          :title="apiDocSelf ? apiDocSelf.name : '没有原始文档'"
          @click="apiDocSelf && setApiDocSelf()"
        >
          <div class="doc-card-back abs doc-card-self"></div>
          原始文档
          {{ apiDocSelf ? apiDocSelf.name : "" }}
        </div>
      </transition>
    </div>
    <Nav class="nav-head " @setApiDoc="(doc) => $emit('set-doc', doc)" :apiDoc="{ name: '本地文档库' }" @search="search"> </Nav>
    <transition-group @enter="enter" @after-leave="afterLeave" name="list-anim" tag="div" class="docs-local ">
      <div class="doc-card flex-column" v-for="(item, i) in docsLocal" :key="item.name" :title="item.name">
        <div class="doc-card-back abs"></div>
        <div @click="$emit('set-doc', item)" class="abs doc-card-view flex-column">
          <div class="doc-card-head flex-row-center flex-row-between">
            <div class="doc-name1 text-nowrap margin-right-10px">
              {{ item.name }}
            </div>
          </div>
          <div class="doc-card-body aux">
            <div class="flex-row-center">版本:{{ item.version }}</div>
            <div class="flex-row-center">作者: {{ item.author || "" }}</div>
          </div>
          <div class="doc-card-footer aux-mini flex-row-center">
            <Icon class=" icon-gray icon-small margin-right-5px" type="time" />
            {{ item.updateTime || "--" }}
          </div>
        </div>
        <span class="doc-card-remove click" @click="$util.preventEvent">
          <Icon type="close" class="icon-gray" @click="remove(item, i)"></Icon>
        </span>
      </div>
    </transition-group>
    <!-- <div class="docs-local view-page-max"></div> -->
    <transition name="anim-opacity">
      <div class="abs loading flex-column" size="large" fix v-if="ajax">
        <div class="flex-center"><Icon type="refresh" class="ajax-loading"></Icon>Loading...</div>
      </div>
    </transition>
  </div>
</template>
<script>
import Nav from "@/views/Nav";
// import docs from "./DocManage.js";
export const components = {
  Nav
};
export default {
  components,
  props: [],
  // mixins: [docs],
  emits: ["set-doc", "remove-doc", "import-doc", "export-doc"],
  data() {
    return {
      anim: false,
      query: { docName: null },
      ajax: null,
      docsLocal: null,
      docCache: null
    };
  },
  computed: {
    apiDocSelf() {
      return window.apiDoc;
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    doAction(ev, key, data) {
      console.log(ev.target.getBoundingClientRect(), key, data);
    },
    enter() {
      this.anim = true;
      // console.log(this);
    },
    afterLeave() {
      this.anim = false;
    },
    search(query) {
      this.query = query;
      this.getData();
    },
    setApiDocSelf() {
      if (window.apiDoc) {
        this.$emit("set-doc", window.apiDoc);
      } else {
        window.alert("没有原始文档");
      }
    },

    remove(doc, i) {
      // return this.docsLocal.splice(i, 1);
      if (!doc) return;
      if (!window.confirm("确认删除此文档?")) {
        return;
      }
      this.$api("doc.remove", doc.id).then((result = {}) => {
        this.getData();
      });
    },
    getData() {
      this.getApiDocList();
      this.getApiDocCache();
    },
    getApiDocCache() {
      this.$api("doc.getCache").then((result = {}) => {
        console.log("[getApiDocCache]", result);
        this.docCache = result.data;
      });
    },
    getApiDocList() {
      this.ajax && this.ajax.cancel("取消获取文档列表");
      let param = this.query || {};
      this.ajax = this.$_apiTool.axios.CancelToken.source();
      let config = {
        cancelToken: this.ajax.token
      };
      this.$api("doc.getList", param, config).then((result = {}) => {
        this.ajax = null;
        console.log("[getApiDocList]", result);
        this.docsLocal = result.data || [];
      });
    }
  }
};
</script>
<style>
.nav-head {
  padding: 10px 1%;
  padding-bottom: 5px;
  z-index: 2;
  /* padding-left: 1%; */
}
.docs {
  z-index: 1;
}
.docs-base {
  flex-shrink: 0;
  display: flex;
  flex-flow: wrap;
}
.docs-local {
  overflow: auto;
  min-height: 200px;
  padding-bottom: 20px;
  position: relative;
}
.doc-card {
  width: 18%;
  height: 110px;
  margin: 10px 1%;
  border-radius: 17px;
  box-shadow: 1px 2px 4px -2px #777;
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  transform-origin: 0% 50%;
}

.list-anim-leave-to,
.list-anim-enter-active,
.list-anim-leave-active,
.list-anim-move {
  pointer-events: none;
}

.list-anim-enter,
.list-anim-leave-to {
  opacity: 0;
  transform: translateY(-50px) scale(0);
}
.list-anim-leave-active {
  position: absolute;
}
.doc-card::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 50%;
  right: 5px;
  bottom: 10px;
  border-radius: 7px;
  transform: rotate(4deg);
  transition: 0.3s;
  z-index: -2;
  box-shadow: 0 0 0 #777;
}
.doc-card:hover::after {
  box-shadow: 0 13px 10px #999;
}
.doc-card-back {
  background: linear-gradient(145deg, #e2dddd 0%, #d3e1e9 40%, #fcfcfa 100%);
  border-radius: 17px;
  overflow: hidden;
  z-index: -1;
}
.doc-card-back::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(~@/../public/logo.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 60%;
  pointer-events: none;
  opacity: 0.5;
}
.doc-card:hover .doc-card-remove {
  opacity: 0.8;
}
.doc-card-head {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 5px 10px;
  border-bottom: 1px solid #d9e4df77;
}
.doc-card-body {
  flex-grow: 1;
  padding: 5px 10px;
}
.doc-card-footer {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 5px 10px;
}
.doc-card-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;
  opacity: 0;
  transition: 0.5s;
}
.doc-card:hover {
  /* filter: drop-shadow(); */
  /* box-shadow: 5px 5px 10px #c0dbde; */
}
.doc-card-add {
  /* border-color: #65c3df; */
  background: linear-gradient(145deg, #49d7ee 0%, #65c3df 40%, #209c9c 100%);
  /* box-shadow: 0 0 1px #49adee; */
  color: #fff;
  /* box-shadow: var(--color-primary);  */
}

.doc-card-import {
  color: #fff;
  /* border-color: #a06a1494; */
  background: linear-gradient(145deg, #eddb5a 0%, #f5c979 40%, #fd9e4d 100%);
}
.doc-card-cache {
  color: #fff;
  /* border-color: #76a014; */
  background: linear-gradient(145deg, #d6e2ad 0%, #c7de7d 35%, #abbd73 100%);
}
.doc-card-self {
  color: #fff;
  /* border-color: #14a056; */
  background: linear-gradient(145deg, #80e984 0%, #97da96 35%, #14a056 100%);
}
.doc-card-ghost {
  /* filter: grayscale(1); */
  /* opacity: 0.5; */
  cursor: not-allowed;
}
.doc-card-ghost::after {
  opacity: 0.5;
  filter: grayscale(1);
}
</style>
